import React, { Component } from 'react'
import { connect } from 'react-redux'
import { initCartData, getToCart, initSwiperData } from '@/store/actionCreator.js'
import { 
  DeliveryWrapper,
  GoodsItem,
  SpanButton
} from '@/style.js'
import { Toast  } from 'antd-mobile';
import SwiperCom from '@/components/swiper'
import styled from 'styled-components'
import ImageView from '@/components/base/imageView'
// import { realImg } from '@/utils/lazyImg'

// console.log(realImg('http://dummyimage.com/375x200/79f299&text=南平市'))

const ListWrapper = styled.div`
 width: 100%;
 display: flex;
 flex-wrap: wrap;
`
class DeliveryHome extends Component {
  render() {
    return (
      <DeliveryWrapper className="delivery-home-wrapper">
        {/* 轮播图 */}
        <SwiperCom
         list={this.props.swiperData}
        ></SwiperCom>

        <ListWrapper>
          {
            this.props.initData.map((item, index) => {
              return <GoodsItem key={index}>
                <li > 
                  <ImageView 
                   src={item.image}
                   round={true}
                   imgClick={() => this.imageClick(item)}
                  />
                </li>
                <li> {item.name} </li> 
                <li> <SpanButton
                  width='60px'
                  onClick={ () => this.props.toCart(item) }
                >+</SpanButton> </li>
              </GoodsItem>
            })
          }
        </ListWrapper>
      </DeliveryWrapper>
    )
  }

  componentDidMount() {
    this.props.getAjaxCart()
    this.props.getSwiperData()
  }

  imageClick(item) {
    console.log('我是图片的点击事件')
    console.log(this.props, 'props----')
    this.props.history.push(`/detail/${item.id}`)
  }


}
const mapStateToProps = (state) => {
  // console.log(state, 'state----state')
  return {
    initData: state.cart.initData,
    swiperData: state.cart.swiperData
  }
}

const mapActionsToProps = (dispatch) => {
  return {
    // 获取初始化的数据
    getAjaxCart() {
      const action = initCartData();
      dispatch(action)
    },
    // 获取轮播图数据
    getSwiperData() {
      const action = initSwiperData()
      dispatch(action)
    },
    // 加入购物函数
    toCart(item) {
      const action = getToCart(item)
      dispatch(action)
      Toast.success('Load success !!!', 1);
    }
  }
}

export default connect(mapStateToProps, mapActionsToProps)(DeliveryHome);